<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>上课不准玩手机</div>
    <div class="box1">蒹葭苍苍 白露为霜</div>
    <p>前端课程真好玩</p>
    <p>菜就别玩</p>
    <div id="box">
        <p class="box1">又菜又爱玩</p>
    </div>
</body>
<script>
    //let const
    //选择器：标签选择器 id选择器 类选择器
    //querySelector()获取第一个元素
    const elm1 = document.querySelector('p'); //通过标签选择
    console.log(elm1);
    const elm2=document.querySelector('#box');//通过id名选择
    console.log(elm2);
    const elm3=document.querySelector('.box');//通过类名选择
    console.log(elm3);
    //获取所有的元素
    const elm01=document.querySelectorAll('div');
    console.log(elm01);
    console.log('-------------');
    //像遍历数组一样遍历elm01.
    //通过遍历伪数组elm01能获取指定位置的元素
    for(let i=0;i<=elm01.length;i++){
        console.log(elm01[i]);
    }
    elm01[1].style.color='green'; 
    elm1.style.color='red';
    //获取子元素
    const son=document.querySelector('#box p');
    console.log(son);
</script>
</html>